<template>
	<view class="filterWrapper">
		<view class="filterItem">
			<text>
				编号
			</text>
			<input type="text"  v-model="MemberCode" placeholder="点击输入编号"/>
			<button class="cu-btn stop text-white" @tap="clearFilter(0)">清空</button>
			<!-- <text>
				编号
			</text>
			<input type="text" placeholder="编号" v-model="MemberCode" /> -->
		</view>
		<view class="filterItem">
			<text>
				姓名
			</text>
			<input type="text"  v-model="MemberName" placeholder="点击输入姓名"/>
			<button class="cu-btn stop text-white" @tap="clearFilter(1)">清空</button>
			<!-- <text>
				姓名
			</text>
			<input type="text" placeholder="姓名" v-model="MemberName" /> -->
		</view>
		<view class="filterItem">
			<text>
				电话
			</text>
			<input type="text"  v-model="Photo" placeholder="点击输入电话"/>
			<button class="cu-btn stop text-white" @tap="clearFilter(2)">清空</button>
			<!-- <text>
              电话
			</text>
			<input type="text" placeholder="电话" v-model="Photo" /> -->
		</view>
		<QSpicker title="请选择日期时间" mode="bottom" type="date" ref="QS_Picekr_date" pickerId="date_1" :dataSet="dateSet"
		 showReset :autoHide="false" contentColor="#33cc33" :lineHeight=".05" @hideQSPicker="hideQSPicker($event)"
		 @showQSPicker="showQSPicker($event)" @confirm="confirm($event)" />
	</view>
</template>

<script>
	import QSpicker from '@/components/QuShe-picker/QuShe-picker.vue'
	import xflSelect from '../../components/xfl-select/xfl-select.vue'
	import * as Api from '@/syApis/syBb/apis.js'
	export default {
		components: {
			QSpicker,
			xflSelect
		},
		data() {
			return {
				dateSet: {
					dateMode: 3,
					dateFormatArray: ['-', '-', ' ', ':', ':']

				},
				startAndEndTime: 0,
				startTime: 0,
				endTime: 0,
				dateName: "",
				MemberName: "",
				MemberCode: "",
				Phone:"",
				StoreID: "",
				GoodsName: "",
				list: [],
				storeList: [],
				Photo:""
			};
		},
		created() {
			let date = new Date();
			this.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
			this.endTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
		},
		
		methods: {
			clearFilter(type){
				if(type==0){
					this.MemberCode = '';
				}else if(type==1){
					this.MemberName = '';
				}else{
					this.Photo = '';
				}
			},
			onNavigationBarButtonTap(e) {
				const index = e.index;
				console.log(index);
				if (index == 0) {
					this.changeDate();
				}
			},
			custormInput() {
				console.log(this);
			},
			//修改数据
			changeDate() {
				var pages = getCurrentPages(),
					prevPage = null;
				if (pages.length > 1) {
					prevPage = pages[pages.length - 2];
				}
				var that = this;
				var filter = "";
				if(this.MemberCode!=""){
					filter+="MemberCode like '%"+this.MemberCode+"%'";
				}
				if(this.MemberName!=""){
					if(filter==""){
						filter+="MemberName like '%"+this.MemberName+"%'";
					}else{
						filter+=" and MemberName like '%"+this.MemberName+"%'";
					}
				}
				if(this.Photo!=""){
					if(filter==""){
						filter+="Photo like '%"+this.Photo+"%'";
					}else{
						filter+=" and Photo like '%"+this.Photo+"%'";
					}
				}
				let data = {
					SelectAll:1,
					Filter:filter,
					MemberCode:this.MemberCode,
					MemberName:this.MemberName,
					Photo:this.Phone
				};
				this.$eventHub.$emit('fire',data);
				uni.navigateBack({
					delta: 1
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			changeShow(name, type) {
				this.startAndEndTime = type;
				this.$refs[name].show();
				this.dateName = name;
			},
			showQSPicker(res) {
				console.log(res);
			},
			hideQSPicker(res) {

			},
			confirm(res) {
				if (this.startAndEndTime == 0) {
					this.startTime = res.data;
				} else {
					this.endTime = res.data;
				}
				this.$refs[this.dateName].hide();
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/static/bbCss/bbFilter.scss';
   // button::after {
   // 	border: none;
   // 	padding: 0px;
   // }
   
   // page {
   // 	width: 100%;
   // 	height: 100%;
   // 	background: #ebebeb;
   // }
   
   // .filterWrapper {
   // 	background: #FFF;
   // 	padding-bottom: 15upx;
   // }
   
   // .title-padding {
   // 	height: var(--status-bar-height);
   // 	background: $bb-bg-color;
   // 	box-sizing: content-box;
   // }
   
   // .filterHeader {
   // 	width: 100%;
   // 	height: 50px;
   // 	line-height: 50px;
   // 	position: relative;
   // 	text-align: center;
   // 	background: $bb-bg-color;
   // 	color: #FFF;
   // 	font-size: 18px;
   // 	background-size: 100%;
   
   // 	.pd {
   // 		display: inline-block;
   // 		position: absolute;
   // 		margin-left: 10px;
   // 		top: 30upx;
   // 		left: 0px;
   // 		font-size: 14px;
   // 		width: 40upx;
   // 		height: 40upx;
   // 		background: url(../../static/back.png) no-repeat;
   // 		background-size: 100%;
   // 	}
   
   // 	.options {
   // 		position: absolute;
   // 		right: 0px;
   // 		top: 10px;
   // 		width: 80px;
   // 		display: flex;
   // 		text-align: right;
   
   // 		.setting {
   // 			width: 30px;
   // 			height: 30px;
   // 			background: url(../../static/sureFilter.png) no-repeat;
   // 			background-size: 30px;
   // 			border: none;
   // 			margin-left: 90upx;
   
   // 		}
   // 	}
   
   // }
   
   // .filterItem {
   // 	height: 120upx;
   // 	line-height: 120upx;
   // 	background: #FFF;
   // 	display: flex;
   // 	flex-direction: row;
   // 	box-sizing: border-box;
   // 	padding-left: 30upx;
   // 	padding-right: 30upx;
   // 	font-size: 32upx;
   // 	background: #FFF;
   
   // 	text {
   // 		flex: 1;
   
   // 		&:last-child {
   // 			text-align: right;
   // 		}
   // 	}
   
   // 	input {
   // 		flex: 1;
   // 		height: 60upx;
   // 		line-height: 60upx;
   // 		margin-top: 50upx;
   // 		border-bottom: 1px solid #ebebeb;
   // 	}
   
   // 	view.selectInput {
   // 		flex: 1;
   // 		height: 60upx;
   // 		line-height: 60upx;
   // 		margin-top: 22upx;
   // 		border-bottom: 1px solid #ebebeb;
   
   // 		input {
   // 			flex: 1;
   // 			height: 40upx;
   // 			line-height: 40upx;
   // 			margin-top: 50upx;
   // 			border-bottom: 1px solid #ebebeb;
   // 		}
   // 	}
   // }
</style>
